<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>发布项目</title>

    <!-- Css (necessary Css) -->
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/bootstrap.min.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/bootstrap-theme.css')}"
          media="all">
    <link rel="stylesheet"
          th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/language-selector-remove-able-css.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/flexslider.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/style.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/plugin.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/menu.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/responsive.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/color.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/iconmoon.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/themetypo.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/widget.css')}" media="all">
    <link rel="icon" th:href="${@mvcResourceUrlProvider.getForLookupPath('/ep/images/favicon.ico')}"
          type="image/x-icon"/>
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/layui/css/layui.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/ep/css/eleTree.css')}" media="all">
    <!-- jQuery (necessary JavaScript) -->
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/jquery.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/bootstrap.min.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/modernizr.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/menu.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/jquery.flexslider-min.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/functions.js')}"></script>
    <script th:src="${@mvcResourceUrlProvider.getForLookupPath('/layui/layui.js')}"></script>
    <script th:src="${@mvcResourceUrlProvider.getForLookupPath('/ep/js/common/common.js')}"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->
    <style>
        .edit-top-bnts {
            float: right;
        }

        .my_icon {
            margin-right: 4px;
            line-height: 56px;
            padding-left: 6px;
            width: 10px;
            color: #DEE0E1;
            font-size: 20px;
        }

        .done span i {
            color: #FE6500;
        }

        .done span {
            font-weight: bold
        }

        .success span i {
            color: #00CBA6;
        }

        .nav_item {
            font-size: 18px;
            cursor: pointer;
        }

        .layui-input-block {
            margin-left: 10px;
            margin-right: 10px;
        }

        .layui-input-block input {
            color: #0C0C0C;
        }

        .ep-form-label {
            font-size: 20px;
            font-weight: bolder;
            display: block;
            line-height: 20px;
            margin-left: 10px;
            margin-right: 10px;
        }

        .ep-form-small_label {
            float: left;
            width: 200px;
            font-size: 16px;
            display: block;
            line-height: 20px;
            margin-left: 10px;
            margin-right: 10px;
        }

        .ep-form-item-require:after {
            display: inline-block;
            margin-left: 10px;
            content: "*";
            line-height: 1;
            font-size: 20px;
            color: #f5222d
        }

        .prompt-txt {
            font-size: 14px;
            line-height: 1.5;
            margin-top: 50px;
            color: #7a8087;
        }

        .img_div {
            background-color: #f8f8f9;
            margin-top: 30px;
            margin-left: 10px;
            margin-right: 10px;
            border: #DEE0E1 solid 1px;
            text-align: center;
            font-size: 16px;
        }
        .img_div:focus {
            border-color: #94b2fa !important;
            box-shadow: 0 0 0 3px rgba(90, 139, 255, 0.2);
        }
    </style>
</head>
<body>
<!-- Header -->
<div th:replace="../templates/ep/front/crowd/header :: main-header"></div>
<!-- Header -->
<!-- body-->
<div class="layui-container" style="border-top: #DEE0E1  solid 1px;">
    <div class="layui-row" style="margin-top: 50px">
        <div class="layui-col-md4">
            <h3 style="font-size: 30px;">编辑项目资料</h3>
        </div>
        <div class="layui-col-md4 layui-col-md-offset4">
            <div id="btns" class="edit-top-bnts">
                <div id="preview" class="layui-btn" style="background-color: #FE6500;width: 90px; height: 40px">
                    <span>预览</span>
                </div>
                <div id="confirm" class="layui-btn hidden" style="background-color: #FE6500;width: 90px;height: 40px">
                    <span>提交审核</span>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row" style="margin-top: 50px;border: #DEE0E1  solid 1px">
        <div id="project_base" class="layui-col-md2 nav_item layui-col-md-offset1">
            <span><i class="layui-icon my_icon">&#x1005;</i></span>
            <span>基础信息</span>
            <span><i class="layui-icon my_icon">&#xe602;</i></span>
        </div>
        <div id="project_material" class="layui-col-md2 nav_item">
            <span><i class="layui-icon my_icon">&#x1005;</i></span>
            <span>项目素材</span>
            <span><i class="layui-icon my_icon">&#xe602;</i></span>
        </div>
        <div id="project_detail" class="layui-col-md2 nav_item done">
            <span><i class="layui-icon my_icon">&#x1005;</i></span>
            <span>详情编辑</span>
            <span><i class="layui-icon my_icon">&#xe602;</i></span>
        </div>
        <div id="project_reward" class="layui-col-md2 nav_item">
            <span><i class="layui-icon my_icon">&#x1005;</i></span>
            <span>回报设置</span>
            <span><i class="layui-icon my_icon">&#xe602;</i></span>
        </div>
        <div id="project_team" class="layui-col-md2 nav_item">
            <span><i class="layui-icon my_icon">&#x1005;</i></span>
            <span>团队成员</span>
            <!--            <span><i class="layui-icon my_icon done">&#xe602;</i></span>-->
        </div>
    </div>
</div>
<div class="layui-container">
    <form class="layui-form" action="" style="margin-top: 50px">
        <label class="ep-form-label ep-form-item-require">项目封面图</label>
        <div class="layui-form-item" style="border: #DEE0E1  solid 1px">
            <input type="text" class="hidden layui-input" name="projectId" data-th-value="${project.projectId}">
            <textarea id="demo"></textarea>
            <label class="prompt-txt layui-input-block">
                <p>· 为便于您的项目页面能够更好地展现给用户，建议您上传图片宽度为1080px，高度不大于4500px，过长的图片可裁剪为多张上传，单图不大于3MB。</p>
                <p>· 为保证项目页面的合规性，您请确保项目详情中所使用的图片、照片、视频、音乐、字体等为原创或是已获得授权。</p></label>
        </div>

        <div class="layui-form-item" style="float: right">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="project_detail"
                        style="background-color: #FE6500; height: 40px">保存,进入下一步
                </button>
                <!--                <button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
            </div>
        </div>
    </form>
</div>
<!--// CopyRight //-->
<div th:replace="../templates/ep/front/crowd/footer :: footer"></div>
<!--// CopyRight //-->

<script th:inline="javascript">
    layui.use(['upload',"layer",'form','layedit'], function () {
        let ctx = [[@{/}]];
        var upload = layui.upload
            ,layer = layui.layer
            ,form = layui.form
        ,layedit = layui.layedit;

        var project = [[${project}]];

        layedit.set({
            uploadImage: {
                url: '/web/updateDetailImag' //接口url
                ,type: 'post' //默认post
            }
        });
        // 赋值
        if (project.detail != null) {
            $('#demo').val(project.detail)
        }
        var detailEdit = layedit.build('demo'); //建立编辑器
        $(".layui-layedit-iframe iframe").css("border"," #DEE0E1  solid 1px")


        //监听提交
        form.on('submit(project_detail)', function (data) {
            // let index = layer.load('', {time: 5 * 1000});
            var param = data.field;
            param.detail = layedit.getContent(detailEdit)
            $.ajax({
                url: "/web/updateProjectBase",
                type: "post",
                data: param,
                success: function (data) {
                    if (data.code == 200) {
                        window.location.href = "/web/project_reward?id=" + data.data;
                        layer.close(index);

                    }
                }
            })
            return false;
        });
        // 标题的点击
        $("#project_material").click(function () {
            if (project != null){
                window.location.href = "/web/project_material?id=" + project.projectId;
            }else{
                layer.msg('请先完善基础信息，提交了基础信息以后才能看后面哦', {icon:5});
            }
        })
        $("#project_base").click(function () {
            if (project != null){
                window.location.href = "/web/project_base?id=" + project.projectId;
            }
        })
        $("#project_detail").click(function () {
            console.log("???")
            if (project != null){
                window.location.href = "/web/project_detail?id=" + project.projectId;
            }else{
                layer.msg('请先完善基础信息，提交了基础信息以后才能看后面哦', {icon:5});
            }
        })
        $("#project_reward").click(function () {
            if (project != null){
                window.location.href = "/web/project_reward?id=" + project.projectId;
            }else{
                layer.msg('请先完善基础信息，提交了基础信息以后才能看后面哦', {icon:5});
            }
        })
        $("#project_team").click(function () {
            if (project != null){
                window.location.href = "/web/project_team?id=" + project.projectId;
            }else{
                layer.msg('请先完善基础信息，提交了基础信息以后才能看后面哦', {icon:5});
            }
        })
        //预览

        $("#preview").click(function () {
            window.location.href = "/web/project_preView?projectId=" + project.projectId;
        })
    });
</script>
</body>
</html>